<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>我的关注</title>
    <link rel="icon" href="./img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="./css/all.css"/>
    <link rel="stylesheet" type="text/css" href="./css/pages-seckillOrder.css"/>
    <link rel="stylesheet" type="text/css" href="./css/elementui.css"/>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <!--<script>
        //隐藏div
        function hideFn() {

            // $("#gz").fadeOut("fast");
        }

        //显示div
        function showFn() {

            // $("#gz").fadeIn("fast");
            $("#gz").style = '';


        }


        //切换显示和隐藏div
        function toggleFn() {
            $("#gz").fadeToggle("fast");
        }


        /*jp的方式实现动画效果*/
        $(function () {
            /*实现隐藏的效果*/
            $("#gz").hide();

            /*实现显示的效果*/
            $("#gz").show();

            /*实现切换的效果*/
        });


    </script>-->
</head>

<body>
<!-- 头部栏位 -->

<!--页面顶部-->
<div id="app">
    <div id="nav-bottom">
        <!--顶部-->
        <div class="nav-top">
            <div class="top">
                <div class="py-container">
                    <div class="shortcut">
                        <ul class="fl">
                            <li class="f-item">青橙欢迎您！</li>
                            <li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a
                                    href="register.html" target="_blank">免费注册</a></span></li>
                        </ul>
                        <div class="fr typelist">
                            <ul class="types">
                                <li class="f-item"><span>我的订单</span></li>

                                <li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
                                <li class="f-item"><span><a href="home.html" target="_blank">我的青橙</a></span></li>
                                <li class="f-item"><span>青橙会员</span></li>
                                <li class="f-item"><span>企业采购</span></li>
                                <li class="f-item"><span>关注青橙</span></li>
                                <li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
                                <li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>
                                <li class="f-item"><span>网站导航</span></li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>

            <!--头部-->
            <div class="header">
                <div class="py-container">
                    <div class="yui3-g Logo">
                        <div class="yui3-u Left logoArea">
                            <a class="logo-bd" title="青橙" href="index.html" target="_blank"></a>
                        </div>
                        <div class="yui3-u Rit searchArea">
                            <div class="search">
                                <form action="" class="sui-form form-inline">
                                    <!--searchAutoComplete-->
                                    <div class="input-append">
                                        <input type="text" id="autocomplete" class="input-error input-xxlarge"/>
                                        <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g collect">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo"><img src="./img/_/photo.png" alt=""></div>
                        <div class="person-account">
                            <span class="name">{{username}}</span>
                            <span class="safe">账户安全</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="list-items">
                        <dl>
                            <dt><i>·</i> 订单中心</dt>
                            <dd><a href="center-index.html">我的订单</a></dd>
                            <dd><a href="center-order-pay.html">待付款</a></dd>
                            <dd><a href="center-order-send.html">待发货</a></dd>
                            <dd><a href="center-order-receive.html">待收货</a></dd>
                            <dd><a href="center-order-evaluate.html">待评价</a></dd>
                        </dl>
                        <dl>
                            <dt><i>·</i> 我的中心</dt>
                            <dd><a href="center-collect.html">我的收藏</a></dd>
                            <dd><a href="center-footmark.html" class="list-active">我的关注</a></dd>
                        </dl>
                        <dl>
                            <dt><i>·</i> 物流消息</dt>
                        </dl>
                        <dl>
                            <dt><i>·</i> 设置</dt>
                            <dd><a href="center-setting-info.html">个人信息</a></dd>
                            <dd><a href="center-setting-address.html">地址管理</a></dd>
                            <dd><a href="center-setting-safe.html">安全管理</a></dd>
                        </dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6 goods">
                    <div class="body">
                        <h4>我的关注 12</h4>


                        <el-row>

                            <el-button type="info">全部关注</el-button>
                            <el-button type="info" v-for="category in categoryList">{{category}}</el-button>
                            <el-button type="info">休闲零食</el-button>
                            <el-button type="info">娱乐影音</el-button>
                        </el-row>

                        <!--<template>-->
                        <!--<el-radio v-model="radio" label="1">不限</el-radio>-->
                        <!--<el-radio v-model="radio" label="2">满减</el-radio>-->
                        <!--<el-radio v-model="radio" label="3">降价</el-radio>-->
                        <!--<el-radio v-model="radio" label="4">优惠券</el-radio>-->

                        <!--</template>-->
                        </br>
                        <el-row>
                            <el-badge :value="12" class="item">
                                <el-button size="small">不限</el-button>
                            </el-badge>
                            &nbsp;
                            &nbsp;


                            <el-badge :value="3" class="item">
                                <el-button size="small">价格</el-button>
                            </el-badge>
                            &nbsp;
                            &nbsp;
                            <el-badge :value="12" class="item">
                                <el-button size="small">评论数</el-button>
                            </el-badge>

                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


                            <!--<div style="text-align: right">-->
                            <!--<el-checkbox :checked="false" name="selectAll" @click="changecheckedAll(checked)">全选
                            </el-checkbox>-->
                            &nbsp;
                            &nbsp;
                            <!--<el-button type="text" @click="addGoodsToCart()">加入购物车</el-button>-->
                            <el-button type="primary" icon="el-icon-delete" @click="cancelSelectAll()">取消关注</el-button>
                            <!--</div>-->
                        </el-row>

                        <div class="goods-list">
                            <ul class="yui3-g" id="goods-list">
                                <li class="yui3-u-1-4" v-for="goodMap in listGoods">
                                    <div class="list-wrap" style="position: relative;">
                                        <!--<div class="p-img" style="position: absolute;"
                                             v-if="this.core == 0 ? 'display: none':'' " onmouseover="changeover() "
                                             onmouseout="changeout()">
                                            <button id="gz" style="font-size: 10px;color: red;background-color: black"
                                                    @click="cancelFocus(goodMap.item.skuId)">
                                                取消关注
                                            </button>
                                        </div>-->
                                        <img :src="goodMap.item.image" alt=''>
                                        <div class="price"><input type="checkbox" :checked='goodMap.checked'
                                                                  @click="changeChecked(goodMap.item.skuId)"
                                                                  name="choose"><strong><em>¥</em> <i>{{(goodMap.item.price/100).toFixed(2)}}</i></strong>
                                        </div>
                                        <div class="attr"><em>{{goodMap.item.name}}</em></div>
                                        <div class="cu"><em><span>促</span>满一件可参加超值换购</em></div>
                                        <div class="operate">
                                            <a @click="saveGoodsToCart(goodMap.item.skuId,1)" target="_blank"
                                               class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                            <a  @click="cancelFocus(goodMap.item.skuId)" class="sui-btn btn-bordered">取消关注</a>  <!--这个取消关注暂时不要-->
                                        </div>
                                    </div>
                                </li>
                                <!--<li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img" style="position: absolute;" v-if="this.core == 1 ? 'display: none':'' " onmouseover="changeover()"
                                             @mouseout="changeout()">
                                            <button id="gz" style="font-size: 10px;color: red;background-color: black" @click="cancelFocus()">
                                                取消关注
                                            </button>
                                        </div>
                                        <div class="p-img"><img src="./img/_/t.jpg" alt=''></div>
                                        <div class="price"><strong><em>¥</em> <i>139.00</i></strong></div>
                                        <div class="attr"><em>Apple苹果iPhone 6s 32G金色 移动联通电信4G手机</em></div>
                                        <div class="cu"><em><span>促</span>满一件可参加超值换购</em></div>
                                        <div class="operate">
                                            <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">降价通知</a>
                                        </div>
                                    </div>
                                </li >-->
                            </ul>
                        </div>


                        <!--猜你喜欢-->
                        <div class="like-title">
                            <div class="mt">
                                <span class="fl"><strong>猜你喜欢</strong></span>
                            </div>
                        </div>
                        <div class="like-list">
                            <ul class="yui3-g">
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="./img/_/itemlike01.png"/>
                                        </div>
                                        <div class="attr">
                                            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>3699.00</i>
                                            </strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有6人评价</i>
                                        </div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="./img/_/itemlike02.png"/>
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>4388.00</i>
                                            </strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有700人评价</i>
                                        </div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="./img/_/itemlike03.png"/>
                                        </div>
                                        <div class="attr">
                                            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有700人评价</i>
                                        </div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="./img/_/itemlike04.png"/>
                                        </div>
                                        <div class="attr">
                                            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有700人评价</i>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部栏位 -->
    <!--页面底部-->
    <div class="clearfix footer">
        <div class="py-container">
            <div class="footlink">
                <div class="Mod-service">
                    <ul class="Mod-Service-list">
                        <li class="grid-service-item intro  intro1">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item  intro intro2">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item intro  intro3">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item  intro intro4">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item intro intro5">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="clearfix Mod-list">
                    <div class="yui3-g">
                        <div class="yui3-u-1-6">
                            <h4>购物指南</h4>
                            <ul class="unstyled">
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>生活旅行/团购</li>
                                <li>常见问题</li>
                                <li>购物指南</li>
                            </ul>

                        </div>
                        <div class="yui3-u-1-6">
                            <h4>配送方式</h4>
                            <ul class="unstyled">
                                <li>上门自提</li>
                                <li>211限时达</li>
                                <li>配送服务查询</li>
                                <li>配送费收取标准</li>
                                <li>海外配送</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>支付方式</h4>
                            <ul class="unstyled">
                                <li>货到付款</li>
                                <li>在线支付</li>
                                <li>分期付款</li>
                                <li>邮局汇款</li>
                                <li>公司转账</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>售后服务</h4>
                            <ul class="unstyled">
                                <li>售后政策</li>
                                <li>价格保护</li>
                                <li>退款说明</li>
                                <li>返修/退换货</li>
                                <li>取消订单</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>特色服务</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>品优购E卡</li>
                                <li>品优购通信</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>帮助中心</h4>
                            <img src="./img/wx_cz.jpg">
                        </div>
                    </div>
                </div>
                <div class="Mod-copyright">
                    <ul class="helpLink">
                        <li>关于我们<span class="space"></span></li>
                        <li>联系我们<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>商家入驻<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
                    <p>京ICP备08001421号京公网安备110108007702</p>
                </div>
            </div>
        </div>
    </div>
    <!--页面底部END-->


</div>


<script src="js/vue.js"></script>
<script src="js/util.js"></script>
<script src="js/axios.js"></script>
<script src="js/elementui.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                core: 0,  //显示与否
                listGoods: [],    //所有关注的商品（map集合包含good,以及checked状态）
                username:'',
                categoryList: [],    //所有商品的类别   （要想实现动态分类展示，后台需要根据数据库分组查询，并返回结果）
            }
        },
        created() {
            this.selectAllFocusGoods();
            axios.get(`/login/username.do`).then(response=>{
                this.username=response.data.username;
        });
        },
        methods: {
            /**
             * 查询该用户的所有关注商品
             * @param username 用户
             */
            selectAllFocusGoods() {
                axios.get(`/myfavorite/find.do`).then(response => {
                    this.listGoods = response.data;
                })
            },

            /**
             * 修改单个选中状态         注：后台需要去修改缓存里面商品的选中状态
             */
            changeChecked(skuId) {
                axios.get(`/myfavorite/updateMyCollection.do?skuId=` + skuId).then(response => {
                    //刷新页面
                    // window.location.reload();
                })
            },

            /**
             * 全选操作   （需要去后台修改该商品的选中状态）
             * @param id
             */
            changecheckedAll(checked) {
                axios.get(`/myfavorite/selectAll.do?checked=`+checked).then(response => {
                    //刷新页面
                    this.selectAllFocusGoods();
                })
            },


            /**
             * 根据id,取消关注该商品（进入后台修改选中状态，返回）
             */
            cancelFocus(skuId) {
                axios.get(`/myfavorite/deleteMyCollectionOne.do?skuId=` + skuId).then(response => {
                    //重新加载页面
                    alert("取消成功");
                    this.selectAllFocusGoods();
                })
            },

            /**
             * 选中所有取消关注     （前端不传参数，后台之后根绝redis的商品选中状态为true的全部删除）
             */
            cancelSelectAll() {
                axios.get(`/myfavorite/deleteMyCollection.do`).then(response => {
                    /*返回结果，重新刷新页面*/
                    //刷新页面
                    // window.location.reload();
                    alert("取消成功");
                    this.selectAllFocusGoods();
                })
            },

            /**
             * 加入购物车（单个商品）
             * @param id
             */
          /*  addGoodCart(skuId) {
                axios.get(`/xxxx/xxx.do?skuId=` + skuId).then(response => {
                    //跳转到购物车页面
                    // location.href='cart.html';
                    alert("添加购物车成功。。。")
                })
            },*/

          saveGoodsToCart(skuId, num){
              axios.get(`/myfavorite/saveGoodsToCartList.do?skuId=${skuId}&num=${num}`).then(response=>{
                  alert("添加购物车成功");
                  this.findCartList();
              })
          },


            /**
             * 选中所有加入购物车     （前端不传参数，直接在后台查询redis，将选中的所有商品添加到购物车）
             */
            addCartAllGoods() {
                /*执行加入购物车方法*/
                axios.post(`/xx/xxx.do`).then(response => {
                    //页面刷新
                    // window.location.reload();
                    alert("添加购物车成功。。。")
                })
            },


           /* /!*显示*!/
            changeover() {
                this.core = 1;
            },
            /!*隐藏*!/
            changeout() {
                this.core = 0;
            }*/
        }
    });

</script>

</body>
</html>